<!-- Secondary Pill Badges start-->
<section id="default-pill-badges">
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Secondary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-pill</code> with <code>.badge-secondary</code>class within element to create default pill badge.</p>
						<div class="badge badge-pill badge-secondary">59</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Primary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-pill</code> with <code>.badge-primary</code>class within element to create primary pill badge.</p>
						<div class="badge badge-pill badge-primary">43</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-pill</code> with <code>.badge-success</code>class within element to create success pill badge.</p>
						<div class="badge badge-pill badge-success">25</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Danger Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-danger</code>class within element to create danger pill badge.</p>
						<div class="badge badge-pill badge-danger">78</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Info Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-info</code>class within element to create info pill badge.</p>
						<div class="badge badge-pill badge-info">57</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Warning Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-warning</code>class within element to create warning pill badge.</p>
						<div class="badge badge-pill badge-warning">68</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Custom Blue Grey Color Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by<code>.bg-blue-grey</code>class within element to create blue grey label.</p>
						<div class="badge badge-pill bg-blue-grey">63</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Secondary Pill Badges end -->

<!-- Pill Badges With Glow effect start-->
<section id="glow-effect-pill-badges">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Pill Badges With Glow effect</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Secondary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-secondary">59</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Primary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-primary">41</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-success">25</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Danger Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-danger">78</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Info Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-info">57</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Warning Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-warning">68</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Custom Blue Grey Color Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-pill</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-pill badge-glow bg-blue-grey">63</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pill Badges With Glow effect end -->

<!-- Square Pill Badges start-->
<section id="square-pill-badges">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Square Pill Badges</h4>
			<p>For square pill badges, use <code>.badge-square</code> class with <code>.badge</code> class.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Secondary Square Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-secondary badge-square">
							15
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Primary Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-primary badge-square">
							21
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Success Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-success badge-square">
							36
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Square Pill Badges end -->

<!-- Pill Badges with Icons start-->
<section id="pill-badges-with-icons">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Pill Badges with Icons</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Secondary Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-secondary">
							<i class="font-medium-4 icon-line-height la la-camera"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Primary Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-glow badge-primary">
							<i class="font-medium-4 icon-line-height la la-headphones"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-glow badge-success">
						<i class="font-medium-4 icon-line-height la la-upload"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Danger Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-danger badge-square">
						<i class="font-medium-4 icon-line-height la la-flask"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Info Icon pill badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-glow badge-info badge-square">
						<i class="font-medium-4 icon-line-height la la-star-o"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Warning Icon Label</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-glow badge-warning badge-square">
						<i class="font-medium-4 icon-line-height la la-youtube"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pill Badges with Icons end -->

<!-- Pill Badges with Dropdown start-->
<section id="pill-badges-with-dropdown">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Pill Badges with Dropdown</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Secondary Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-secondary" data-toggle="dropdown">
							<i class="la la-camera font-medium-4"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Primary Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-glow badge-primary" data-toggle="dropdown">
								88
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-glow badge-success" data-toggle="dropdown">
							<i class="la la-upload font-medium-4"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Danger Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-danger badge-square" data-toggle="dropdown">
							<i class="la la-flask font-medium-4"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Info Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-glow badge-info badge-square" data-toggle="dropdown">
								33
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Warning Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-glow badge-warning badge-square" data-toggle="dropdown">
							<i class="la la-youtube font-medium-4"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pill Badges with Dropdown end -->

<!-- Bordered Pill Badges start-->
<section id="bordered-pill-badges">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Bordered Pill Badges</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Primary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-border</code> with <code>.badge-primary</code>class within element to create primary pill badge.</p>
						<div class="badge badge-pill badge-border border-primary primary">43</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by<code>.badge-border</code> with <code>.badge-success</code>class within element to create success pill badge.</p>
						<div class="badge badge-pill badge-border border-success success">25</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Danger Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-danger</code>class within element to create danger pill badge.</p>
						<div class="badge badge-pill badge-border border-danger danger">78</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Info Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-info</code>class within element to create info pill badge.</p>
						<div class="badge badge-pill badge-border border-info info">57</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Warning Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-warning</code>class within element to create warning pill badge.</p>
						<div class="badge badge-pill badge-border border-warning warning">68</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Custom Brown Color Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.bg-blue</code>class within element to create blue pill badge.</p>
						<div class="badge badge-pill badge-border border-blue blue">34</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Bordered Pill Badges end -->



<!-- Pill Badges With Glow effect start-->
<section id="pill-badges-with-glow-effect">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Pill Badges With Glow effect</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Primary Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-border border-primary primary">41</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-border border-success success">25</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Danger Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-border border-danger danger">78</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Info Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-border border-info info">57</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Warning Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-glow badge-pill badge-border border-warning warning">68</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Custom Brown Color Pill Badges</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<p>Use the <code>.badge</code> class, followed by <code>.badge-border</code> with <code>.badge-glow</code>class within element to create glow styled pill badge.</p>
						<div class="badge badge-pill badge-border badge-glow border-blue blue">34</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pill Badges With Glow effect end -->



<!-- Square Pill Badges start-->
<section id="Square-pill-badges">
	<div class="row">
		<div class="col-12 mt-1">
			<h4>Square Pill<h4>
			<p>For square pill badges, use <code>.badge-square</code> class with <code>.badge</code> class.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Danger Square Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border border-danger danger badge-square">
							15
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Primary Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border border-primary primary badge-square">
							21
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Success Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border border-success success badge-square">
							36
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Square Pill Badges end -->



<!-- Bordered Pill Badges with Icons start-->
<section id="bordered-pill-badges-with-icons">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Bordered Pill Badges with Icons</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Pink Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border border-pink pink">
							<i class="font-medium-4 icon-line-height la la-headphones"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Primary Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border badge-glow border-primary primary">
						<i class="font-medium-4 icon-line-height la la-camera"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border badge-glow border-success success">
							<i class="font-medium-4 icon-line-height la la-cloud-upload"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Danger Icon Pill</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border border-danger danger badge-square">
						<i class="font-medium-4 icon-line-height la la-eyedropper"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Info Icon pill badge</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border badge-glow border-info info badge-square">
						<i class="font-medium-4 icon-line-height la la-star-o"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Warning Icon Label</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="badge badge-pill badge-border badge-glow border-warning warning badge-square">
						<i class="font-medium-4 icon-line-height la la-youtube-play"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Bordered Pill Badges with Icons end -->



<!-- Bordered Pill Badges with Dropdown start-->
<section id="bordered-pill-badges-with-dropdown">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Bordered Pill Badges with Dropdown</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-border border-blue-grey blue-grey" data-toggle="dropdown">
							<i class="font-medium-4 icon-line-height la la-camera"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Danger Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-border badge-glow border-danger danger" data-toggle="dropdown">
								66
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Success Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-border badge-glow border-success success" data-toggle="dropdown">
							<i class="font-medium-4 icon-line-height la la-cloud-upload"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Purple Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-border border-purple purple badge-square" data-toggle="dropdown">
							<i class="font-medium-4 icon-line-height la la-eyedropper"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Info Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-border badge-glow border-info info badge-square" data-toggle="dropdown">
								55
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Square Warning Pill with Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group">
							<div class="badge badge-pill dropdown-toggle badge-border badge-glow border-warning warning badge-square" data-toggle="dropdown">
							<i class="font-medium-4 icon-line-height icon-social-youtube-outline"></i>
							</div>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Bordered Pill Badges with Dropdown end -->